<script setup>
import {ref, onMounted} from "vue";
import {useRoute} from "vue-router";
import Document from '../markdown/document.md';
import {ElNotification} from 'element-plus'

const active = ref("project")
const route = useRoute()
const scrollbar = ref(null)
const handle = (e) => {
  let target = document.getElementById(e.props.name).offsetTop
  scrollbar.value.setScrollTop(target);
}
const scroll = ({scrollTop}) => {
  let project = document.getElementById("project").offsetTop
  let robot = document.getElementById("robot").offsetTop
  let agent = document.getElementById("agent").offsetTop
  let device = document.getElementById("device").offsetTop
  let cases = document.getElementById("cases").offsetTop
  let steps = document.getElementById("steps").offsetTop
  let pub = document.getElementById("pub").offsetTop
  let global = document.getElementById("global").offsetTop
  let remote = document.getElementById("remote").offsetTop
  let run = document.getElementById("run").offsetTop
  let suite = document.getElementById("suite").offsetTop
  let quartz = document.getElementById("quartz").offsetTop
  let result = document.getElementById("result").offsetTop
  let ver = document.getElementById("ver").offsetTop

  if (scrollTop > project && scrollTop <= robot - 50) {
    active.value = 'project';
  } else if (scrollTop > robot - 50 && scrollTop <= agent - 50) {
    active.value = 'robot'
  } else if (scrollTop > agent - 50 && scrollTop <= device - 50) {
    active.value = 'agent'
  } else if (scrollTop > device - 50 && scrollTop <= cases - 50) {
    active.value = 'device'
  } else if (scrollTop > cases - 50 && scrollTop <= steps - 50) {
    active.value = 'cases'
  } else if (scrollTop > steps - 50 && scrollTop <= pub - 50) {
    active.value = 'steps'
  } else if (scrollTop > pub - 50 && scrollTop <= global - 50) {
    active.value = 'pub'
  } else if (scrollTop > global - 50 && scrollTop <= remote - 50) {
    active.value = 'global'
  } else if (scrollTop > remote - 50 && scrollTop <= run - 50) {
    active.value = 'remote'
  } else if (scrollTop > run - 50 && scrollTop <= suite - 50) {
    active.value = 'run'
  } else if (scrollTop > suite - 50 && scrollTop <= quartz - 50) {
    active.value = 'suite'
  } else if (scrollTop > quartz - 50 && scrollTop <= result - 50) {
    active.value = 'quartz'
  } else if (scrollTop > result - 50 && scrollTop <= ver - 50) {
    active.value = 'result'
  } else if (scrollTop > ver - 50) {
    active.value = 'ver'
  }
}
onMounted(() => {
  ElNotification({
    title: '🎉文档不够清晰？',
    dangerouslyUseHTMLString: true,
    duration: 6000,
    message: "来 <a href='https://gitee.com/sonic-cloud/sonic-cloud' target='_blank'>这里</a> 参与建设吧！<br>",
    position: 'bottom-right',
  })
})
</script>
<template>
  <el-backtop target=".demo-tree-scrollbar .el-scrollbar__wrap"></el-backtop>
  <el-scrollbar class="demo-tree-scrollbar" ref="scrollbar" style="height: 100%" @scroll="scroll">
    <div class="back">
      <el-tabs @tab-click="handle" v-model="active" tab-position="left" style="position: absolute; height:100%;text-align: left;
  margin-right: 30px">
        <el-tab-pane label="项目管理" name="project"></el-tab-pane>
        <el-tab-pane label="通知机器人" name="robot"></el-tab-pane>
        <el-tab-pane label="Agent中心" name="agent"></el-tab-pane>
        <el-tab-pane label="设备中心" name="device"></el-tab-pane>
        <el-tab-pane label="测试用例" name="cases"></el-tab-pane>
        <el-tab-pane label="测试步骤" name="steps"></el-tab-pane>
        <el-tab-pane label="公共步骤" name="pub"></el-tab-pane>
        <el-tab-pane label="全局参数" name="global"></el-tab-pane>
        <el-tab-pane label="远程控制" name="remote"></el-tab-pane>
        <el-tab-pane label="运行测试" name="run"></el-tab-pane>
        <el-tab-pane label="测试套件" name="suite"></el-tab-pane>
        <el-tab-pane label="定时任务" name="quartz"></el-tab-pane>
        <el-tab-pane label="测试结果" name="result"></el-tab-pane>
        <el-tab-pane label="版本&模块" name="ver"></el-tab-pane>
      </el-tabs>
      <Document style="text-align: left;margin-left: 150px"/>
    </div>
  </el-scrollbar>
</template>